<template>
  <HeaderLayout
    :flex="true"
  >
    <div class="logo" slot='left'>
      <img src="@/asset/img/nav-logo.png" />
    </div>
    <Tabs v-model='activeTab' class="tabs">
      <Tab v-for="(v, i) in tab" :key="i" :title="v.title">
        <Swipe :height = "185" :autoplay="3000">
          <SwipeItem>
            <div class="banner">
              <div class="banner-preview"><img v-lazy='v.banner' /></div>
              <div class="banner-title">新城四小规划有变，明年建成！周边楼盘有望成为新城双学区</div>
            </div>            
          </SwipeItem>
          <SwipeItem>
            <div class="banner">
              <div class="banner-preview"><img v-lazy='v.banner' /></div>
              <div class="banner-title">新城四小规划有变，明年建成！周边楼盘有望成为新城双学区</div>
            </div>            
          </SwipeItem>
          <SwipeItem>
            <div class="banner">
              <div class="banner-preview"><img v-lazy='v.banner' /></div>
              <div class="banner-title">新城四小规划有变，明年建成！周边楼盘有望成为新城双学区</div>
            </div>            
          </SwipeItem>
          <SwipeItem>
            <div class="banner">
              <div class="banner-preview"><img v-lazy='v.banner' /></div>
              <div class="banner-title">新城四小规划有变，明年建成！周边楼盘有望成为新城双学区</div>
            </div>            
          </SwipeItem>
        </Swipe>

        <div class="list">
          <Card
            v-for="(v_, i_) in v.data"

            :startDate = "v_.startDate"
            :endDate = "v_.endDate"
            :title = "v_.title"
            :location = "v_.location"

            :key="i_"
          >
            <Button slot='right' @click="handleJoin(v_, i_, $event)" type = 'primary' :disabled="v_.status === 1">{{ v_.status === 0 ? '报名参会' : '已报名' }}</Button>
          </Card>
        </div>
      </Tab>
    </Tabs>
  </HeaderLayout>
</template>

<script>

import moment from 'moment'
import { Tab, Tabs, Button, Swipe, SwipeItem } from 'vant'
import HeaderLayout from '@/layout/headerLayout/index.vue'
import Icon from '@/component/icon'
import Card from '@/component/card'

const now = new Date().getTime()

// 模拟数据
function fakeData () {
  return [...Array(10)].map((v, i) => ({
    startDate: new Date().getTime(),
    endDate: new Date().getTime(),
    title: '第二届中国医师协会神经介入年会',
    location: '广州南丰朗豪酒店',
    status: i % 2
  }))
}

export default {

  name: '',

  data() {
    return {
      activeTab: 0,

      tab: [{
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }, {
        title: '会议分类',
        banner: 'http://img4.imgtn.bdimg.com/it/u=3863592357,820351787&fm=200&gp=0.jpg',
        data: fakeData()
      }]
    }
  },

  components: {
    HeaderLayout,
    Icon,
    Tab,
    Tabs,
    Button,
    Swipe,
    SwipeItem,
    Card,
  },

  methods: {
    moment,
    handleJoin: function (v, i, e) {
      console.log(v, i, e)
      if (v.status === 0) {
        return
      }

      this.$router.push('/pay')
    }
  }

}

</script>

<style lang="less" scoped>

@import '../../less/mixin.less';

.logo {
  height: 32px;
  margin-left: -3px;

  img {
    vertical-align: top;
    height: 100%;
  }
}

.tabs {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;

  /deep/ .van-tabs__wrap {
    flex-shrink: 0;
  }

  /deep/ .van-tabs__content {
    flex-grow: 1;
    .scrollable();
  }

  /deep/ .van-tabs__line {
    background-color: #008CC9;
  }
  /deep/ .van-tab {
    font-size: 15px;
    padding: 0 8px;

    &:after {
      content: '';
      position: absolute;
      height: 14px;
      right: 0;
      top: 50%;
      margin-top: -7px;
      width: 1px;
      background-color: #eee;
    }

    &:last-child:after {
      display: none;
    }
  }
  /deep/ .van-tab--active {
    color: #008CC9;
  }
}

.banner {
  position: relative;
  overflow: hidden;
  height: 185px;

  &-preview {
    overflow: hidden;

    img {
      vertical-align: top;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  &-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 46px;
    line-height: 46px;
    padding: 0 18px;
    color: #fff;
    font-size: 12px;
    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );

    .text-overflow();
  }
}

.list {
  margin: 7px 0;
  padding: 0 7px;

  .card {
    margin-top: 8px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.card {
  display: flex;
  align-items: center;
  position: relative;
  padding: 18px 0;
  border-radius: 6px;
  box-shadow:3px 0px 3px rgba(7,0,2,0.08);
  background-color: #fff;
  overflow: hidden;

  &:before {
    content: '';
    position: absolute;
    width: 5px;
    height: 56px;
    top: 50%;
    margin-top: -28px;
    left: 0;
    border-radius: 0 4px 4px 0;
    background-color: #ddd;
  }

  &:nth-child(1n):before { background-color: #D6CCF1;  }
  &:nth-child(2n):before { background-color: #A8D8F0;  }
  &:nth-child(3n):before { background-color: #F1CF9C;  }
  &:nth-child(4n):before { background-color: #ABDBDC;  }

  &-header {
    display: flex;
    flex-shrink: 0;
    padding: 0 17px;
    height: 100%;
    align-items: center;
    justify-content: center;
    min-width: 0;
    position: relative;
    // border-right: 1px solid #DEDEDE;

    .hairline(right, #DEDEDE);

    &-date {
      line-height: 1.3;

      .date-start {
        font-size: 16px;
        color: #275D8F;
        margin-bottom: 2px;
        font-weight: 500;
      } 
      .date-end {
        font-size: 13px;
        color: #275D8F;
        margin-bottom: 4px;
      }
      .date-week {
        font-size: 11px;
        color: #A2A2A2;
      }
    }
  }

  &-body {
    flex-grow: 1;
    padding-left: 17px;

    h2 {
      font-size: 15px;
      color: #262626;
      margin-bottom: 7px;
      padding-right: 15px;
      line-height: 1.2;
    }

    &-content {
      display: flex;

      &-main {
        flex-grow: 1;
        min-width: 0;
      }

      &-right {
        flex-shrink: 0;
        margin-left: 10px;
        display: flex;
        flex-direction: row-reverse;
        align-items: flex-end;

        /deep/ .van-button {
          height: 26px;
          line-height: 24px;
          min-width: 86px;
          font-size: 15px;
          border-radius: 3px 0 0 3px;

          &[disabled] {
            background-color: #B0B0B0 !important;
            border-color: #B0B0B0 !important;
            color: #fff !important;
            pointer-events: none;
          }
        }
      }
    }

    .card-body-date {
      font-size: 13px;
      color: #737373;
      margin-bottom: 5px;
    }

    .card-body-location {
      font-size: 13px;
      color: #737373;
    }
  }
}

</style>
